<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏+弹出功能实现</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
		div{
			width: 500px;
			height: 500px;
			background: #ff0;
			display: block;
		}	
			
		</style>
	</head>
	<body>
		<button id="show">显示按钮</button>
		<button id="hide">隐藏按钮</button>
		<button id="sd">滑动式向下按钮</button>
		<button id="su">滑动式向上隐藏按钮</button>
		<button id="fi">淡入按钮</button>
		<button id="fo">淡出按钮</button>
		<div></div>
		<script>
			$("#fo").click(function(){
				//隐藏css
				$("div").fadeOut(6000)			
				});
			$("#fi").click(function(){
				//隐藏css
				$("div").fadeIn(6000)			
				});
			$("#su").click(function(){
				//隐藏css
				$("div").slideUp()			
				});
			$("#sd").click(function(){
				//隐藏css
				$("div").slideDown()			
				});
				$("#show").click(function(){
					//隐藏css
					$("div").show()			
					});
					$("#hide").click(function(){
						//隐藏css
						$("div").hide()			
						});
		</script>
	</body>
</html>